<template>
  <div class="top-menu">
    <div class="main-menu2">
      <el-menu theme="dark" :default-active="defaultItem" class="el-menu main-menu" id="main-menu" mode="horizontal" @select="handleSelect" :router='false'>
        <template v-for="menuItem in mainMenuData">
          <el-menu-item
            class="main-menu-item main-menu-font"
            @click='goToPage(menuItem)'
            :index="menuItem.butRule"
          ><em :class="'iconfont main-icon main-icon-'+icon(menuItem.butRule)"></em>{{menuItem.resName}}</el-menu-item>
        </template>
         <el-submenu index="2">
        <template slot="title"><em class="iconfont main-icon main-icon-userCenter"></em>用户管理</template>
          <el-menu-item index="2-2" @click='loginout'>退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="user-info" v-if='username'>
      {{username}}
    </div>
  </div>
</template>

<script>
  import {
    setLogout,
    getUserInfo
  } from 'src/api/index.js'
  export default {
    created () {
      getUserInfo()
        .then((res) => {
          let result = res.data
          if (result.code === 100) {
            this.username = result.data.userName
          }
        })
    },
    data () {
      return {
        username: '',
        defaultItem: ''
      }
    },
    watch: {
      $route () {
        this.$nextTick(() => {
          this.findRouterParent()
        })
      }
    },
    methods: {
      handleSelect (id) {

      },
      goToPage (item) {
        if (item.butRule === this.$route.path) {
          this.$router.$forceUpdate()
        } else {
          this.$router.push(({ path: item.butRule }))
        }
      },
      icon (url) {
        let arr = url && url.split('/') || []
        return arr[1]
      },
      loginout () {
        setLogout().then((res) => {
          let result = res.data
          if (result.code === 100) {
            this.$alert('已退出登录', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                if (window.location.hostname === 'test.mall.admin.plateno.com') {
                  window.location.href = 'http://111.plateno.com:8080/plateno-privilege-manager/login.jsp?myredirect=http://test.mall.admin.plateno.com:8888'
                } else if (window.location.hostname === 'mall.admin.plateno.com') {
                  window.location.href = 'http://sso.plateno.com:1888/weixinlogin.jsp?myredirect=http://o2o.plateno.com'
                } else {
                  window.alert('退出')
                }
              }
            })
          }
        })
      },
      findRouterParent () {
        let parentInfo = this.$route.meta.parent
        this.defaultItem = '/' + parentInfo
      }
    },
    computed: {
      mainMenuData () {
        return this.$store.state.menu.menuData
      }
    }
  }
</script>

<style lang = 'less'>
  .top-menu{
    display: flex;
    /*overflow: hidden;*/
  }
  .user-info {
    text-align: right;
    width: 200px;
    padding-top: 20px;
    color: #bfcbd9;
  }
  .main-menu2 {
    flex: 1
  }
  .main-menu{
    display: flex;
  }
  .main-menu-item{
    text-align: center;
    /*flex: 1;*/
  }
  #main-menu .main-menu-font,#main-menu .el-submenu__title{
    font-size: 14px!important;
    margin-top: 10px;
  }
  #main-menu .el-submenu__title{
  }
  #main-menu {
    .el-submenu__title{
      border-bottom:none;
    }
    .main-menu-item,.el-submenu{
      position: relative;
      border-bottom:none;
      &:after{
        position:absolute;
        left: 0;bottom: -10px;
        width: 100%;
        height: 5px;
        content:"";
        transition: all .5s
      }
      &:hover{
        &:after{
          background:#20a0ff;
        }

      }
    }
  }
  .main-icon,#main-menu .el-submenu__title{
    display: block;
    text-align: center;
    height: 24px;
    &:before{
      font-size:34px;
       line-height:1;
    }
    &-index:before{
      content: "\e604";
    }
    &-supplierManagement:before{
      content: "\e605";
    }
    &-goods:before{
       content: "\e602";
    }
    &-orderManagement:before{
      content: "\e603";
    }
    &-operational:before{
      content: "\e607";
    }
    &-supplierSettlement:before{
      content: "\e601";
    }
    &-authorityManagement:before{
      content: "\e606";
    }
    &-userCenter:before{
      content: "\e60e";
    }
  }
</style>
